<template>
  <div class="right" v-adaptive="{ bottomOffset: 0 }">
    <div class="right_top">
      <!-- <div class="right_top_baseDate">
        组件信息：{{getItem( dragStore.clickItem.type)?.label }}—{{dragStore.clickItem.discribe}}
      </div> -->
      <template v-for="(item, key) in editTypeValue" :key="item">
        <div class="right_top_box" v-if="dragStore.clickItemSettings?.[key]">
          <div class="right_top_title">{{ editTypeValue[key] }}</div>
          <div :key="index" class="right_top_body" v-for="(itex, index) in dragStore.clickItemSettings[key]">
            <ElFormItem v-if="itex.type != 'valueKeyList'" style="margin-bottom: 0" :label="itex.label">
              <ElInput v-if="['textarea','text','number'].includes(itex.type)" :type="itex.type" @focus="focusFn()" @blur="blurFn(itex)" v-model="renderTemplate(itex)[itex.key]" />
              <el-radio-group v-if="itex.type == 'radio'" size="small" :style="{ lineHeight: 'none' }" v-model="renderTemplate(itex)[itex.key]">
                <el-radio-button :label="true">是</el-radio-button>
                <el-radio-button :label="undefined">否</el-radio-button>
              </el-radio-group>
            </ElFormItem>
            <div v-if="itex.type == 'valueKeyList'" class="valueKeyList">
              {{ itex.label }} <el-button type="primary" size="small" plain @click="addParamsList(itex)">新增</el-button>
              <div v-for="(itec, indec) in renderTemplate(itex)[itex.key]" class="valueKeyListItem" :key="itec">
                <ElFormItem :label="itez.label" v-for="(itez, indez) in itex.valueKeyList" :key="indez">
                  <div style="width: 100%" v-if="itez.key == 'id' && typeof renderTemplate(itez)[indec][itez.key] == 'boolean'">{{ renderTemplate(itez)[indec][itez.key] }}</div>
                  <ElInput v-else-if="itez.type == 'text'" @focus="focusFn()" @blur="blurFn(itez)" v-model="renderTemplate(itez)[indec][itez.key]" />
                  <el-radio-group v-if="itez.type == 'valueType'" size="small" @change="(e:string | number | boolean) => valueTypeFn(e, itez, indec)" :style="{ lineHeight: 'none' }" v-model="renderTemplate(itez)[indec][itez.key]">
                    <el-radio-button label="string">字符串</el-radio-button>
                    <el-radio-button label="number">数字</el-radio-button>
                    <el-radio-button label="boolean">布尔值</el-radio-button>
                  </el-radio-group>
                  <div class="tip" v-if="itez.tip">{{ itez.tip }}</div>
                </ElFormItem>
                <el-button type="danger" class="valueKeyListItem_delete" size="small" plain @click="deleteParamsList(itex, indec)">删除</el-button>
              </div>
            </div>
            <div class="tip" v-if="itex.tip">{{ itex.tip }}</div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
<script setup lang="tsx">
import { ElFormItem } from "element-plus";
import { utilDeepClone } from "@/assets/utils/deepClone";
let editTypeValue: { [key in IStdOSetRightKey]: string } = {
  high: "高级设置",
  normalProp: "常用属性",
  lessNormalProp: "较常用属性",
  prop: "属性"
};
const dragStore = useDrag();
function blurFn(item: IStdOSetRightItem) {
  if (!dragStore.clickItem || !dragStore.clickItemCopy) return;
  let modelObj = item.editType == "high" ? dragStore.clickItem.highEdit : dragStore.clickItem.props;
  let modelObjCopy = item.editType == "high" ? dragStore.clickItemCopy.highEdit : dragStore.clickItemCopy.props;
  let propKey = item.key;
  let nowValue = modelObj[propKey];
  let oldValue = modelObjCopy[propKey];
  if (nowValue == oldValue) return;
  if (propKey == "itemKey") {
    if ( dragStore.clickParent?.parent.key != 'diologForm') return;
    let parent =dragStore.clickParent.parent;
    let currentForm = (dragStore.refList[parent.highEdit.ref] as ISudEx ).dataed.formRef.form;
    currentForm[nowValue] = currentForm[oldValue];
    return delete currentForm[oldValue];
  }
  if (propKey == "emitToOpen"&&(dragStore.clickItem.key=='searchForm'||dragStore.clickItem.key=='cTable')) {
    let currentDioRef= dragStore?.refList?.[nowValue] as  ISudEx
    if (currentDioRef)
      return (dragStore.clickItem.methods.emitToOpen = ({ row }) => {
        currentDioRef.dataed.methods.showDialogFn(row ? row : {});
        return;
      });
    modelObj[propKey] = oldValue;
    return nowValue ? ElMessage.error("不存在showAdd对应的ref值") : "";
  }
  if (propKey == "emitGetListFn") {
    let searchFormKey = dragStore.clickItem.key == "searchForm" ? dragStore.clickItem.highEdit.ref : modelObj.searchFormKey;
    if (dragStore.refList[nowValue] && dragStore.clickItem.type == "container" && (dragStore.clickItem.key == "searchForm" || dragStore.clickItem.key == "diologForm"))
      return (dragStore.clickItem.methods.emitGetListFn = async (fn: { fn: () => void }) => {
        await (dragStore?.refList[modelObj.emitGetListFn] as ITableEx).emitGetListFn(searchFormKey ? (dragStore?.refList[searchFormKey] as ISusEx).dataed.formRef.form : {});
        if (fn?.fn) fn.fn();
      });
    modelObj[propKey] = oldValue;
    return nowValue ? ElMessage.error("不存在getListFn或searchFormKey对应的ref值") : "";
  }
  if (propKey == "ref" && dragStore.clickItem.type == "container") {
    if (dragStore.refList[nowValue]) {
      dragStore.clickItem.highEdit.ref = oldValue;
      return ElMessage.error("已存在该ref值");
    }
    dragStore.refList[nowValue] = dragStore.refList[oldValue];
    return delete dragStore.refList[oldValue];
  }
}
function focusFn() {
  dragStore.clickItemCopy = utilDeepClone(dragStore.clickItem);
}
function renderTemplate(item: IStdOSetRightItem) {
  if (!dragStore.clickItem) return;
  let modelKey = item.editType == "high" ? dragStore.clickItem.highEdit : dragStore.clickItem.props;
  if (item.propKey) {
    item.propKey.map((ite, index) => {
      let isLast = index == item.propKey!.length - 1;
      if (!modelKey[ite]) modelKey[ite] = isLast ? [] : {};
      // if (isLast && !modelKey[ite][indec]) modelKey[ite][indec] = { name: "1", id: 1, valueType: "string" };
      modelKey = modelKey[ite];
    });
  }
  return modelKey;
}
function addParamsList(itex: IStdOSetRightItem) {
  if (!renderTemplate(itex)[itex.key]) renderTemplate(itex)[itex.key] = [];
  let obj = renderTemplate(itex)[itex.key];
  obj.push({ name: "1", id: 1, valueType: "string" });
}
function deleteParamsList(itex: IStdOSetRightItem, indec: number) {
  let obj = renderTemplate(itex)[itex.key];
  obj.splice(indec, 1);
}
function valueTypeFn(e: string | number | boolean, itez: IStdOSetRightItem, indec: number) {
  if (e == "string") {
    renderTemplate(itez)[indec].id = String(renderTemplate(itez)[indec].id);
  } else if (e == "number") {
    renderTemplate(itez).id = Number(renderTemplate(itez)[indec].id);
  } else {
    renderTemplate(itez)[indec].id = Boolean(renderTemplate(itez)[indec].id);
  }
}
</script>
<style lang="scss" scoped>
.right {
  width: 20%;
  overflow-y: auto;
  padding: 10px;
  .right_top {
    cursor: pointer;
    margin-bottom: 10px;
    .right_top_baseDate {
      padding: 10px;
    }
    .right_top_box {
      border-radius: 5px;
      padding: 10px;
      margin-bottom: 10px;
      .right_top_title {
        padding-bottom: 10px;
        border-bottom: 1px solid #d4d4d4;
      }
      .right_top_body {
        font-size: 13px;
        border-radius: 5px;
        padding: 5px;
        margin-bottom: 5px;
        .valueKeyList {
          border: 1px solid #cecece;
          padding: 5px 10px;
          border-radius: 5px;
          .valueKeyListItem {
            border-radius: 5px;
            padding: 0px 10px;
            margin: 5px 0;
            .valueKeyListItem_delete {
              margin-bottom: 5px;
            }
          }
        }
      }
    }
  }
}
</style>
